<script>
export default {
  name: "Login",
  data() {
    return {
      showLogin: true,
      captchaUrl: "",
      loginForm: {
        username: "",
        password: "",
      },
      checked: true,
      rules: {
        username: [{required: true, message: "请输入用户名", trigger: "blur"}, {
          min: 5,
          max: 14,
          message: '长度在 5 到 14 个字符',
          trigger: 'blur'
        }
        ],
        password: [{required: true, message: "请输入密码", trigger: "blur"}, , {
          min: 6,
          message: '密码长度要大于6',
          trigger: 'blur'
        }],

      },
      user: {
        username: "",
        password: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      },
      registerRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: ['blur', 'change']}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: ['blur', 'change']},
          {minLength: 6, message: '密码长度不小于6位', trigger: ['blur', 'change']}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: ['blur', 'change']}
        ]
      }
    }

  },
  methods: {
    returnWelcome() {
      this.$router.push('/')
    },
    switchToLogin() {
      this.showLogin = true;
    },
    switchToRegister() {
      this.showLogin = false;
    },
    register() {
      this.$refs.registerForm.validate(isValid => {
        if (isValid) {
          this.$axios.post("http://localhost:8888/users/register", this.user)
              .then(response => {
                if (response.data.status == 10000) {
                  this.$message({
                    message: "注册成功",
                    type: "success",
                  });
                  this.resetRegister();
                  this.switchToLogin();
                } else {
                  this.$message.error({
                    type: "error",
                    message: response.data.msg
                  })
                }
              })
        } else {
          this.$message.error('请填写必填信息！');
        }
      })
    },
    submitLogin() {
      this.$axios
          .get("http://localhost:8888/users/login", {
            params: {
              username: this.loginForm.username,
              password: this.loginForm.password,
            },
            
        
              headers: {
                "Content-Type": "application/json;charset=UTF-8",
              }
            
          })
          .then((response) => {
            sessionStorage.setItem("username", this.loginForm.username);
            if (response.data.status == 10000) {
              this.$message({
                message: "登录成功",
                type: "success",

              });
              this.$router.push('/Home')
            } else {
              console.log(response.data.msg);
              this.$message.error({
                type: "error",
                message: response.data.msg
              })
            }
          })
    },
    reset() {
      this.loginForm.username = ''
      this.loginForm.password = ''
      this.$message.success({
        type: "success",
        message: "重置成功"
      })
    },
    resetRegister(){
      this.user={
        username: "",
        password: "",
        phone: "",
        sex: "2",
        img: null,
        remark: "用户",
        createTime: "",
        updateTime: "",
      }
    }
  }
}


</script>

<template>
  <div class="auth-container">
    <div class="body">
      <transition name="slide" mode="out-in">
        <el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer" v-if="showLogin">
          <h3 class="loginTitle">
            欢迎登录
          </h3>
          <el-form ref="loginFormRef">
            <el-form-item prop="username">
              <el-input
                  type="text"
                  v-model="loginForm.username"
                  placeholder="亲，请输入用户名">
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                  type="password"
                  v-model="loginForm.password"
                  placeholder="亲，请输入密码">
              </el-input>
            </el-form-item>
          </el-form>
          <el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>

          <el-button type="primary" class="resetButton" @click="reset">重置</el-button>
          <el-button type="primary" class="returnWelcome" @click="returnWelcome">返回主页面</el-button>
          <el-button type="primary" class="register" @click="switchToRegister">注册</el-button>
          <el-button type="primary" style="width:95%" @click="submitLogin">登录</el-button>
        </el-form>
        <el-form :model="user"
                 label-width="120px"
                 id="editForm"
                 :rules="registerRules"
                 ref="registerForm"
                 class="loginContainer"
                 v-else
        >
          <h2 style="text-align: center">注册</h2>
          <el-form-item label="用户名" prop="username" required>
            <el-input v-model="user.username"/>
          </el-form-item>
          <el-form-item label="密码" prop="password" required>
            <el-input v-model="user.password"/>
          </el-form-item>
          <el-form-item label="手机号" prop="phone" required>
            <el-input v-model="user.phone"/>
          </el-form-item>
          <el-form-item label="性别" prop="">
            <el-radio-group v-model="user.sex">
              <el-radio label="0">男</el-radio>
              <el-radio label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注" prop="">
            <el-input v-model="user.remark"/>
          </el-form-item>
          <el-button type="primary" class="to-login" @click="switchToLogin">返回登录</el-button>
          <el-button type="primary" class="confirmReg" @click="register">确认注册</el-button>
        </el-form>
      </transition>
    </div>

  </div>
</template>
<style lang="less" scoped>
.register {
  width: 35%;
  margin: 5px 20px 10px 20px;
  float: right;
}

.resetButton {
  width: 20%;
  margin: 6px 15px 15px 200px;
}

.returnWelcome {
  width: 30%;
  margin: 5px 20px 10px 20px;
}

.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  text-align: left;
  margin: auto;
  margin-top: 180px;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: aliceblue;
  border: 1px solid blueviolet;
  box-shadow: 0 0 25px #f885ff;
}

.loginTitle {
  margin: 0px auto 48px auto;
  text-align: center;
  font-size: 40px;
}

.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;
}

.body {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/background.jpg");
  background-size: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.auth-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide-enter-active,
.slide-leave-active {
  transition: transform 0.5s;
  position: relative;
}

.slide-enter {
  transform: translateX(300%);
  width: 350px;
}

.slide-leave-to {
  transform: translateX(-300%);
  width: 350px;
}

.confirmReg, .to-login {
  margin-top: 20px;
  margin-left: 40px;
}
.confirmReg{
  float: right;
}

</style>








